<template>
  <div
    class="mainContainer_box"
    :class="[{ h_14: !getBottomBarState }, { h_06: getBottomBarState }]"
  >
    <f7-toolbar tabbar top class="backgroundColor">
      <f7-link tab-link="#tab-1" tab-link-active>我的</f7-link>
      <f7-link tab-link="#tab-2">全部</f7-link>
      <f7-link tab-link="#tab-3">♪圈</f7-link>
    </f7-toolbar>
    <f7-tabs
      swipeable
      :class="[{ h67: !getBottomBarState }, { h75: getBottomBarState }]"
    >
      <f7-tab
        id="tab-1"
        class="tab page-content"
        tab-active
        @tab:show="tab1Show"
      >
        <v-mineBlock />
      </f7-tab>
      <f7-tab
        id="tab-2"
        class="tab page-content"
        style="overflow-y:hidden"
        ref="infiContent"
        @tab:show="tab2Show"
      >
        <v-wholeBlock />
      </f7-tab>
      <f7-tab id="tab-3" class="tab page-content" @tab:show="tab3Show">
        <v-shareBlock @showToTop="showToTop"/>
      </f7-tab>
    </f7-tabs>
    <!-- Extended FAB Center Bottom (Red) -->
    <f7-fab
      class="toTop_fab"
      position="right-bottom"
      slot="fixed"
      text=""
      color="red"
      @click="handleFabClick()"
      v-if="isShow"
      ref="fabRef"
    >
      <svg-icon iconClass="totop_white" />
    </f7-fab>
  </div>
</template>
<script>
import MineBlock from '@/components/mineblock.vue'
import WholeBlock from '@/components/wholeblock.vue'
import ShareBlock from '@/components/shareblock.vue'
import { mapActions, mapGetters, mapMutations } from 'vuex'
import jquery from 'jquery'
export default {
  components: {
    'v-mineBlock': MineBlock,
    'v-wholeBlock': WholeBlock,
    'v-shareBlock': ShareBlock,
  },
  computed: {
    ...mapGetters({
      getBottomBarState: 'getBottomBarState',
    }),
  },
  data() {
    return {
      isShow:false,
    }
  },
  mounted() {},
  methods: {
    ...mapActions({
      changeBottomBarState: 'changeBottomBarState',
    }),
    showToTop(bool){
      if (bool && this.getBottomBarState){
        this.isShow = true;
      }
      else {
        this.isShow = false;
      }
    },
    dealBottomBar(val) {
      this.$store.dispatch('changeBottomBarState', val)
      this.isShow = false;
    },
    tab1Show() {
      this.dealBottomBar(0)
    },
    tab2Show() {
      this.dealBottomBar(0)
    },
    tab3Show() {
      console.log('..tab3...')
      this.dealBottomBar(1)
    },
    handleFabClick() {
      console.log('fab is clicked')
      // $('.share_block .page-content').scrollTop(0,0);
      jquery('.share_block .page-content').animate({ scrollTop: 0 })
    },
  },
}
</script>
<style lang="scss" scoped>
.light .mainContainer_box {
  $spanColor: #212121;
  $spanSmallColor: #ff3b30;
  /deep/ .tab-link {
    color: $spanColor;
  }
  /deep/ .tab-link.tab-link-active {
    color: $spanSmallColor;
  }
}
.dark .mainContainer_box {
  $spanColor: #ffffff;
  $spanSmallColor: #ff3b30;
  /deep/ .tab-link {
    color: $spanColor;
  }
  /deep/ .tab-link.tab-link-active {
    color: $spanSmallColor;
  }
}
.h_14 {
  height: calc(100vh - 1.4rem);
}
.h_06 {
  height: calc(100vh - 0.6rem);
}
.mainContainer_box {
  overflow: hidden;
  .tabs {
    .tab {
      padding: 0;
      margin: 0;
    }
  }
  .h67 {
    height: calc(100vh - 1.4rem);
  }
  .h75 {
    height: calc(100vh - var(--f7-toolbar-height) - 0.6rem);
  }

  .toTop_fab {
    width: 0.3rem;
    height: 0.3rem;
    /deep/ a {
      width: 0.3rem;
      height: 0.3rem;
      .svg-icon {
        width: 0.2rem;
      }
    }
  }
}
</style>
